<div th:fragment="html" xmlns:th="http://www.w3.org/1999/xhtml" xmlns:th="http://www.w3.org/1999/xhtml">
	<script>
		$(function(){
			var oiid = getUrlParms("oiid");
	        var data4Vue = {
	        		uri:'forebuy',
	        		total:0,
	        		orderItems:[],
	        		order:{address:'',post:'',receiver:'',mobile:'',userMessage:''}
	        };
	        //ViewModel
	        var vue = new Vue({
	            el: '#workingArea',
	            data: data4Vue,
	            mounted:function(){ //mounted　表示这个 Vue 对象加载成功了
	            	this.load();
	            },        
	            methods: {     	
	            	load:function(){
	                    var url =  this.uri+"/?oiid="+oiid;
	                    axios.get(url).then(function(response) {
	                    	var result = response.data;
	            	        vue.total = result.data.total;
	            	        vue.orderItems = result.data.orderItems;
	            	        
	                        vue.$nextTick(function(){
	        	            	linkDefaultActions();
	                        })
	                    });
	            	},
	            	submitOrder:function(){
	                    var url =  "forecreateOrder";
	                    axios.post(url,this.order).then(function(response) {
	                    	var result = response.data;
	                    	var oid = result.data.oid;
	                    	var total = result.data.total;
	                    	location.href="alipay?oid="+oid+"&total="+total;
	                    });	            		
	            	}
	            }
	        });       			
			
		})
	</script>
	<div class="buyPageDiv">
		<div class="buyFlow">
			<img class="pull-left" src="img/site/simpleLogo.png">
			<img class="pull-right" src="img/site/buyflow.png">
			<div style="clear:both"></div>
		</div>
		<div class="address">
			<div class="addressTip">输入收货地址</div>
			<div>
			
				<table class="addressTable">
					<tr>
						<td class="firstColumn">详细地址<span class="redStar">*</span></td>
						
						<td><textarea name="address" v-model="order.address" placeholder="建议您如实填写详细收货地址，例如接到名称，门牌好吗，楼层和房间号等信息"></textarea></td>
					</tr>
					<tr>
						<td>邮政编码</td>
						<td><input  name="post" v-model="order.post" placeholder="如果您不清楚邮递区号，请填写000000" type="text"></td>
					</tr>
					<tr>
						<td>收货人姓名<span class="redStar">*</span></td>
						<td><input  name="receiver"  v-model="order.receiver" placeholder="长度不超过25个字符" type="text"></td>
					</tr>
					<tr>
						<td>手机号码 <span class="redStar">*</span></td>
						<td><input name="mobile"  v-model="order.mobile" placeholder="请输入11位手机号码" type="text"></td>
					</tr>
				</table>
			</div>
		</div>
		<div class="productList">
			<div class="productListTip">确认订单信息</div>
			
			
			<table class="productListTable">
				<thead>
					<tr>
						<th colspan="2" class="productListTableFirstColumn">
							<img class="tmallbuy" src="img/site/tmallbuy.png">
							<a class="marketLink" href="#nowhere">店铺：天猫店铺</a>
							<a class="wangwanglink" href="#nowhere"> <span class="wangwangGif"></span> </a>
						</th>
						<th>单价</th>
						<th>数量</th>
						<th>小计</th>
						<th>配送方式</th>
					</tr>
					<tr class="rowborder">
						<td  colspan="2" ></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
					</tr>
				</thead>
				<tbody class="productListTableTbody">
						<tr class="orderItemTR" v-for="oi,index in orderItems" >
							<td class="orderItemFirstTD">
								<img class="orderItemImg"  :src="'img/productSingle_middle/'+oi.product.firstProductImage.id+'.jpg'">
							</td>
							<td class="orderItemProductInfo">
								<a  :href="'product?pid='+oi.product.id" class="orderItemProductLink">
									{{oi.product.name}}
								</a>
								<img src="img/site/creditcard.png" title="支持信用卡支付">
								<img src="img/site/7day.png" title="消费者保障服务,承诺7天退货">
								<img src="img/site/promise.png" title="消费者保障服务,承诺如实描述">
							</td>
							<td>
								<span class="orderItemProductPrice">
									{{oi.product.promotePrice | formatMoneyFilter}}
								</span>
							</td>
							<td>
								<span class="orderItemProductNumber">{{oi.number}}</span>
							</td>
							<td>
								<span class="orderItemUnitSum">
									{{oi.product.promotePrice*oi.number | formatMoneyFilter}}
								</span>
							</td>
							<td rowspan="5" class="orderItemLastTD" v-if="index==0" >
								<label class="orderItemDeliveryLabel">
									<input type="radio" value="" checked="checked">
									普通配送
								</label>
								<select class="orderItemDeliverySelect" class="form-control">
									<option>快递 免邮费</option>
								</select>
							</td>
						</tr>
				</tbody>
			</table>
			<div class="orderItemSumDiv">
				<div class="pull-left">
					<span class="leaveMessageText">给卖家留言:</span>
					<span>
						<img class="leaveMessageImg" src="img/site/leaveMessage.png">
					</span>
					<span class="leaveMessageTextareaSpan">
						<textarea name="userMessage" v-model="order.userMessage" class="leaveMessageTextarea"></textarea>
						<div>
							<span>还可以输入200个字符</span>
						</div>
					</span>
				</div>
				<span class="pull-right">店铺合计(含运费): ￥
					{{total|formatMoneyFilter}}
				</span>
			</div>
		
		</div>
		<div class="orderItemTotalSumDiv">
			<div class="pull-right"> 
				<span>实付款：</span>
				<span class="orderItemTotalSumSpan">{{total|formatMoneyFilter}}</span>
			</div>
		</div>
		<div class="submitOrderDiv">
				<button type="submit" class="submitOrderButton" @click="submitOrder">提交订单</button>
		</div>
	</div>
</div>
